<template>
    <titlebox :title="title_mes.title" :imgsrc="title_mes.imgsrc"/>
    <div class="common-layout">
        <el-container style="height: 60vw;">
            <el-aside width="25%" style="height: 50vw; display: flex; justify-content: center; border: 1px solid black; border-radius: 2vw;">
                <div style="width: 70%; margin-top: 3vw; ">
                    <div>
                        <h2 style="display: inline;margin-right: 1vw;">{{ person.name }}</h2>
                        <p style="display: inline;">线上观众</p>
                    </div>
                    <el-divider style="margin-top: 2vw;"/>
                    <div >
                        <p>我的积分</p>
                        <p style="font-size: 2.25vw; margin-top: 1vw">{{ person.points }}</p>
                        <button style="margin-top: 1vw;" @click="add">每日签到</button>
                    </div>
                    <el-divider style="margin-top: 2vw;" />
                    <div >
                        <p>公司</p>
                        <p>{{ person.company }}</p>
                    </div>
                    <el-divider style="margin-top: 2vw;" />
                    <div>
                        <p>部门</p>
                        <p>{{ person.department }}</p>
                    </div>
                    <el-divider style="margin-top: 2vw;" />
                    <div>
                        <p>职位</p>
                        <p>{{ person.position }}</p>
                    </div>
                    <el-divider style="margin-top: 2vw;" />
                    <div>
                        <p>手机</p>
                        <p>{{person.phone}}</p>
                    </div>
                    <el-divider style="margin-top: 2vw;" />
                    <div>
                        <p>邮箱</p>
                        <p>{{ person.email }}</p>
                    </div>
                    <el-divider style="margin-top: 2vw;" />
                    <div style="display: flex; justify-content: center">
                        <button @click="dialogFormVisible = true">修改信息</button>
                        
                    </div>
                </div>
            </el-aside>
            <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500">
                <el-form :model="person1" @submit.native.prevent="change(person1)">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                    <el-input v-model="person1.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="公司" :label-width="formLabelWidth">
                    <el-input v-model="person1.company" autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth">
                    <el-input v-model="person1.department" autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item label="职位" :label-width="formLabelWidth">
                    <el-input v-model="person1.position" autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input v-model="person1.phone" autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth">
                    <el-input v-model="person1.email" autocomplete="off">
                    </el-input>
                </el-form-item>
                <el-button type="primary" native-type="submit" @click="change(person1)">提交</el-button>
                </el-form>
            </el-dialog>
            <el-container style="margin-left: 5vw"> 
                <el-header>
                    <div class="label-container">
                        <div class="tab-container">
                            <button @click="showData('submit')" :class="submit()">
                                <h2>我的订阅</h2>
                            </button>
                        </div>
                        <div class="tab-container">
                            <button @click="showData('points')" :class="points()">
                                <h2>我的积分</h2>
                            </button>
                        </div>
                    </div>
                </el-header>
                <el-main style="margin-top: 5vw;">
                    <div v-show="selectedData ==='submit'">
                        <el-tabs v-model="activeName">
                            <el-tab-pane  name="first">
                                <template #label>
                                    <h3>议程订阅</h3>
                                </template>
                                <div v-if="subcribe_num === 0">
                                    <el-empty description="没有订阅"></el-empty>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane name="second">
                                <template #label>
                                    <h3>精彩活动订阅</h3>
                                </template>
                                <div v-if="subcribe_active_num === 0">
                                    <el-empty description="没有订阅"></el-empty>
                                </div>
                                <div v-if="subcribe_active_num != 0">
                                    <div v-for="item in subcribe_active">
                                        <Card :title="item.name" :time="item.time" :img="item.img"></Card>
                                    </div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div v-show="selectedData ==='points'">
                        <el-tabs v-model="activeName_1">
                            <el-tab-pane  name="first">
                                <template #label>
                                    <h3>积分规则</h3>
                                </template>
                                <Point_get v-for="item in 6"/>
                                <h3 style="font-size: 1.8vw; font-weight: 500; margin-top: 2vw;">积分规则说明</h3>
                                <p>
                                    1.您所得积分可参与平台不定期开展的物品兑换活动，具体参见每次兑换活动说明；
                                    2. 用户所得积分仅可在活动期间内参与物品兑换活动，活动结束后将无法进行兑换，每个账号用户在活动期间仅能参与3次兑换，您不得通过直接或间接方式利用多个账号获取多次兑换机会；
                                    3. 您获取积分后将有机会获取奖品。请以网站所展示的展品为准（奖品先到先得，全部兑换完为止）
                                    4. 请您勿必知晓，您须按要求填写相关信息，如因用户原因导致无法配送或收货等后果由用户自行承担相关责任；同时，本活动奖品价值为市场参考价值，且您所收到奖品请以所发送的实物为准；
                                    5.如您在积分领取及活动过程中存在违规行为（包括但不限于使用多个账号、使用辅助程序等非人为操作方式、利用平台技术漏洞和平台规则漏洞等作弊方式或他不合理方式参与本活动），平台有权取消、冻结您的积分并取消您参与活动的资格，没收相关奖励，情节严重的，平台有权封禁账号并追究用户违规责任；
                                    6. 如出现不可抗力或情势变更的情况（包括但不限于重大灾害事件、活动受政府机关指令需要停止举办或调整的、活动遭受严重网络攻击或因系统故障需要暂停举办的），则平台可依相关法律法规的规定主张免责；
                                    7.平台可以根据运营情况对积分规则进行变动或调整，相关变动或调整将公布在活动页面上，公布后依法生效；
                                    8. 平台在法律允许的最大范围内对活动拥有解释权。
                                </p>
                            </el-tab-pane>
                            <el-tab-pane name="second">
                                <template #label>
                                    <h3>积分兑换</h3>
                                </template>
                                <Change_card/>
                            </el-tab-pane>
                            <el-tab-pane name="third">
                                <template #label>
                                    <h3>积分明细</h3>
                                </template>
                                <Table_points/>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup name="">
    import titlebox from '@/components/titlebox.vue'
    import { ref } from 'vue';
    import Card from '../personal/card/index.vue'
    import Point_get from './point_get/index.vue'
    import Table_points from './table_points/index.vue'
    import Change_card from './change_card/index.vue'
    const title_mes={title:'个人中心',imgsrc:'/src/assets/images/4.png'}
    let person = ref({name:'user',points:0,company:'',department:'',position:'',phone:'',email:''})
    let person1 = ref({name:'user',points:0,company:'',department:'',position:'',phone:'',email:''})
    let dialogFormVisible = ref(false);
    const formLabelWidth = '140px'
    const selectedData = ref("submit");
    const subcribe_active = [{name:'格物致知@西湖论剑',time:'18：00-21：00',img:'src/assets/home/meeting/meeting1.webp'}]
    const subcribe_active_num = 1
    const subcribe = [{name:'',time:'',img:''}]
    const subcribe_num = 0
    let activeName = ref('first')
    let activeName_1 = ref('first')
    function add(){
        person.value.points += 100;
    }
    function change(person1:any){
        person.value = person1.value
    }
    const showData = (date: string) => {
        selectedData.value = date;
    };
    function submit() {  
        if(selectedData.value==="submit"){
            return 'selected';
            console.log(selectedData.value)
        } 
        else {
            return 'tag';
        }
    }
    function points() {  
        if(selectedData.value==="points"){
            return 'selected';
        } 
        else {
            return 'tag';
        }
    }
</script>

<style scoped lang="scss">
    .common-layout{
        width: 100%;
    }
    .label-container{
        padding-top: 2vw;
        width: 100%;
        height: 8vw;
        display: flex;
        flex-grow: 1;
        overflow: hidden;
        z-index: 1;
        .tab-container{
            padding-right: 2.6042vw;
            .tag{
                border: none;
                height: 4vw;
                background-color: #fff;
                justify-content: center;
                font-weight: 700;
                letter-spacing: 0.1vw;
                cursor: pointer;
            }
            .selected{
                border: none;
                height: 4vw;
                color:#fff;
                justify-content: center;
                font-weight: 700;
                letter-spacing: 0.1vw;
                cursor: pointer;
                
            }
        }
    }
</style>
